<template>
  <div class="head">
    <div class="f-left">
      <img src="../../static/images/header-img.png" alt class="img head-dis">
      <span class="title head-dis">国家肾脏病临床医学研究中心</span>
      <span class="titleText head-dis">{{headParam.titleText}}</span>
    </div>
    <span class="ymd f-right head-dis">{{data}} {{currentTime}} {{nowTime}}</span>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: ['headParam'],
  created () {
    this.timeFormate()
    this.nowTimes()
  },
  methods: {
    nowTimes () {
      this.timeFormate(new Date())
      setInterval(this.nowTimes, 1000)
      clearInterval(this.nowTimes)
      this.nowTimes = null
    }
  }
}
</script>

<style lang="stylus" scoped>
.head {
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  background-color: #1090eb;
  // vertical-align: middle;
  .head-dis{
     display: inline-block;
    vertical-align: middle;
  }
  .img {
    width: 0.52rem;
    height: 0.52rem;
    margin-right: 0.2rem;
    margin-left: 0.3rem;
  }

  .title {
    font-size: 0.36rem;
    color: #fff;
    margin-right: 2.9rem;
  }

  .titleText {
    font-size: 0.36rem;
    color: #f0fffd;
    margin-right: 2.9rem;
  }

  span {
    display: inline-block;
    height: 0.8rem;
    line-height: 0.8rem;
  }

  .ymd {
    float: right;
    color: #f0fffd;
    font-size: 0.24rem;
    margin-right: 0.3rem;
  }
}
</style>
